<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-input v-model="LogQuery.userId" placeholder="请求用户id"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="LogQuery.method" placeholder="请求方法"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="LogQuery.level" clearable placeholder="日志等级">
          <el-option :value="1" label="INFO"/>
          <el-option :value="2" label="WARN"/>
          <el-option :value="3" label="ERROR"/>
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="LogQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="LogQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
      <el-button type="default" icon="el-icon-refresh" size="small" @click="resetData()">清空</el-button>

    </el-form>

    <!-- 表格 -->
    <template>
      <el-alert
        title="日志等级说明"
        type="success">
        debug：暂未用到 <br/>
        info ：自行添加注解，用于调试记录接口信息 <br/>
        warn ：自定义异常，一般为参数格式错误 权限不足等 <br/>
        error：为系统错误异常
      </el-alert>
    </template>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        max-height="60"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="userId" label="用户id" width="80"/>
      <!--<el-table-column prop="requestUrl" label="请求路径" width="350"/>-->
      <el-table-column prop="uri" label="请求路径" width="350"/>


      <el-table-column label="日志级别" width="100" prop="level"
                       :filters="[{ text: 'debug', value: 0 }, { text: 'info', value: 1 },{ text: 'warn', value: 2 }, { text: 'error', value: 3 }]"
                       :filter-method="filterLevel"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="levelType(scope.row.level)"
            disable-transitions>{{levelText(scope.row.level)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="queryString" label="请求参数" width="80"/>

      <el-table-column label="请求体" width="80">
        <template slot-scope="scope" v-if="scope.row.requestBody">
          <el-tooltip class="item" effect="dark" content="点击查看" placement="top">
            <i class="el-icon-view " @click="showJSONView(scope.row.requestBody)"></i>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="返回参数" width="80">
        <template slot-scope="scope" v-if="scope.row.result">
          <el-tooltip class="item" effect="dark" content="点击查看" placement="top">
            <i class="el-icon-view " @click="showJSONView(scope.row.result)"></i>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="took" label="花费时间" width="80"/>

      <el-table-column prop="remoteAddr" label="请求地址" width="130"/>

      <el-table-column prop="description" label="描述" width="190"/>

      <el-table-column prop="createTime" label="添加时间" sortable width="160"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <!-- </router-link>-->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"
                     v-permission="'log:delete'">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      background
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
    <el-dialog
      title="结果集"
      :visible.sync="dialogVisibleResult"
      width="60%">
      <json-viewer :value="showText" :expand-depth=4></json-viewer>
    </el-dialog>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        listLoading: true, // 是否显示loading信息
        list: null, //查询后返回数据
        page: 1, //当前页
        limit: 5, //每页记录数
        total: 0, //总记录数
        LogQuery: {},//条件封装对象、
        dialogVisibleResult: false,
        showText: ''
      }
    },
    created() {
      this.getList()
    },
    computed: {
      //计算日志等级文字
      levelText() {
        return level => {
          switch (level) {
            case 0:
              return 'debug'
            case 1:
              return 'info'
            case 2:
              return 'warn'
            case 3:
              return 'error'
          }
        }
      },
      //计算日志等级样式
      levelType() {
        return level => {
          switch (level) {
            case 0:
              return ''
            case 1:
              return 'info'
            case 2:
              return 'warning'
            case 3    :
              return 'danger'
          }
        }
      }
    },
    methods: {
      //获取列表
      getList(page = 1) {
        //查询列表
        if (!this.hasPerm('log:list')) {
          return
        }
        this.page = page
        this.api({
          url: `/syslog/pageListLogCondition/${this.page}/${this.limit}`,
          method: "post",
          data: this.LogQuery
        }).then(data => {
          console.log(data)
          this.list = data.list //列表
          this.total = data.totalCount //总数
          this.listLoading = false
        })
      },
      showJSONView(resultTest) {
        this.dialogVisibleResult = true
        this.showText = JSON.parse(resultTest)
      },
      filterLevel(value, row) {
        console.log(row)
        console.log(value)
        return row.level === value;
      },
      //重置查询条件
      resetData() {
        this.LogQuery = {}
        this.getList()
      },
      //删除
      removeDataById(id) {
        // debugger
        //MessageBox 在utils/request.js中已引用
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/syslog/${id}`,
            method: "delete",
          })
        }).then(() => {
          this.getList(this.page)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      },

    }

  }
</script>

<style scoped>
  .cell i:hover {
    color: #3a8ee6;
  }

  .cell i {
    margin: 0 auto;
    width: 17px;
    font-size: 17px;
    display: block;
  }
</style>
